{include file="common/header"}
<style type="text/css">
    .el-user-info{height: calc(100vh - 120px);display: flex; padding: 20px 0;}
    .el-user-info .blog-list{overflow: auto;height: calc(100vh - 200px);}
    .el-user-info .blog-list .item{padding:16px 0;position: relative;border-bottom: 1px dashed #eee;}
    .el-user-info .blog-list .item .details{display: inline-block;vertical-align: middle;}
    .el-user-info .blog-list .item .title{font-size: 16px;color: #333;display: block;}
    .el-user-info .blog-list .item .tag{display: inline-block;color: #777;font-size: 14px;margin-right:10px;margin-top: 8px}
    .el-user-info .blog-list .item .tag i{margin-right: 5px;}
    .el-user-info .blog-list .item .remove{cursor: pointer;}
    .el-user-info .blog-list .item .time{color: #777;font-size: 12px;position: absolute;right: 16px;bottom: 16px;}
</style>
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="el-user-info">
            <el-skeleton :rows="3" :loading="loading" class="info">
                <el-image variant="image" class="cover" :src="userInfo.cover" :preview-src-list="[userInfo.cover]"></el-image>
                <div class="nickname">
                    <span>{{userInfo.nickname}}</span>
                    <img :src="userInfo.group.icon" style="height: 20px;vertical-align: middle;margin-left: 10px;">
                </div>
                <div class="describe">{{userInfo.describe}}</div>
            </el-skeleton>
            <div class="content">
                <div class="el-user-header">
                    <div v-for="(item, index) in tabs" @click="tab = index" :key="index" class="item" :class="{active: index == tab}">{{item}}</div>
                </div>
                <el-form v-if="tab == 0" ref="userInfo" label-width="100px" :model="userInfo">
                    <el-form-item label="生日：" prop="birthday">
                        <el-skeleton :rows="1" :loading="loading">{{userInfo.birthday}}</el-skeleton>
                    </el-form-item>
                    <el-form-item label="性别：" prop="sex">
                        <el-skeleton :rows="1" :loading="loading">{{userInfo.sex == 1 ? '男' : '女'}}</el-skeleton>
                    </el-form-item>
                    <el-form-item label="注册日期：" prop="create_time">
                        <el-skeleton :rows="1" :loading="loading">{{userInfo.create_time}}</el-skeleton>
                    </el-form-item>
                    <el-form-item label="最近登录：" prop="login_time">
                        <el-skeleton :rows="1" :loading="loading">{{userInfo.login_time}}</el-skeleton>
                    </el-form-item>
                </el-form>
                <div v-if="tab == 1" class="blog-list" v-infinite-scroll="blogList" :infinite-scroll-disabled="blogDisabled">
                    <div class="item" v-for="(item, index) in blogData">
                        <div class="details">
                            <a class="title" :href="item.url" target="_blank">{{item.title}}</a>
                            <div>
                                <div class="tag"><i class="el-icon-collection"></i>{{item.collect_count}}收藏</div>
                                <div class="tag"><i class="el-icon-chat-round"></i>{{item.comment_count}}评论</div>
                                <div class="tag"><i class="el-icon-view"></i>{{item.clicks}}浏览</div>
                            </div>
                        </div>
                        <div class="time">{{item.create_time}}</div>
                    </div>
                    <div v-if="blogLoading" class="el-loader">加载中...</div>
                    <div v-if="blogNoMore && blogLoading === false" class="el-nomore">没有更多了</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                tab: 0,
                tabs:['概览','文章'],
                userInfo: {},
                loading: false,
                blogData: [],
                blogSearch:{
                    page: 1,
                    date: [],
                    keyword: "",
                    user_id: locationUrl.get('id')
                },
                blogLoading: false,
            }
        },
        created() {
            if (this.userInfo == null) {
                location.href = index_url('login/index');
            }
            this.getData();
        },
        computed: {
            blogNoMore() {
                return this.blogCount <= this.blogData.length;
            },
            blogDisabled() {
                return this.blogLoading || this.blogNoMore;
            }
        },
        methods: {
            /**
             * 用户基础数据
             */
            getData() {
                let self = this;
                self.loading = true;
                post('api/user/info', {id: locationUrl.get('id')}, function(res){
                    self.userInfo = res.data;
                    self.loading = false;
                });
            },
            
            /**
             * 博客加载列表
             */
            blogList() {
                let self = this;
                self.blogLoading = true;
                post('api/blog/blog/index', self.blogSearch, function (res) {
                    if (res.status === 'success') {
                        self.blogSearch.page++;
                        self.blogData  = self.blogData.concat(res.data);
                        self.blogCount = res.count;
                    }
                    self.blogLoading = false;
                })
            },
            /**
             * 博客搜索
             */
            blogSearchList() {
                this.blogSearch.page = 1;
                this.blogData = [];
                this.blogList();
            },
            /**
             * 博客删除
             */
            blogRemove(item,index) {
                let self = this;
                self.$confirm('确定要删除吗', '', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'}).then(() => {
                    post('api/blog/userBlog/delete', item, function (res) {
                        if (res.status === 'success') {
                            self.blogCount--;
                            self.blogData.splice(index, 1);
                        } else {
                            self.$notify({message: res.message, type: res.status});
                        }
                    })
                }).catch(() => {});
            },
            
        },
        watch: {
            tab(v){
                console.log(v);
            }
        }
    });
</script>
</body>
</html>